<template>
  <div class="box">
    <div class="content">
      <div class="login-wrapper">
        <h1>登录</h1>
        <div class="login-form">
          <div class="username form-item">
            <span>使用邮箱或者手机号</span>
            <form>
              <input v-model="text" type="text" class="input-phone" ref="phonetext" placeholder="请输入您的手机号">
            </form>
          </div>
          <div class="password form-item">
            <span>密码</span>
            <form>
              <input v-model="word" type="password" class="input-password" ref="password"  autocomplete=" "  placeholder="请输入您的密码">
            </form>
          </div>
          <button class="login-btn" @click="loginclick">登 录</button>
        </div>
        <div class="divider">
          <span class="line"></span>
          <span class="divider-text">其他方式登录</span>
          <span class="line"></span>
        </div>
        <div class="other-login-wrapper">
          <div class="other-login-item" @click="qqlogin">
            <img src="../asset/QQ.png" alt="">
          </div>
          <div class="other-login-item" @click="wxlogin">
            <img src="../asset/WeChat.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getusers } from '@/api/getData.js';

import { mapState, mapActions } from 'vuex'


export default {
  name: 'Login', 
  data() {
    return {
      text: null,
      word: null,
      count: 3,
      name: '',
      id: '',
      user: {}
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.isLogin
    }),
  },
  methods: {
    ...mapActions(['dl_xg']),
    loginclick() {
      getusers().then((res) => {
        let isloginin = res.some(item => {
          if ((item.phonetext == this.text) && (item.password == this.word)) {
            this.user = item
            return true
          } else {
            return false
          }
        })
        if (isloginin) {
          this.$message({
            message: '登录成功',
            type: 'success',
            duration: 1500
          })
          setTimeout(() => {
            window.localStorage.setItem('loginStatu', true) // 保存登录状态
            this.resetSetItem('user', JSON.stringify(this.user)) // 将状态保存起来
            sessionStorage.setItem('user', JSON.stringify(this.user)) // 将用户信息封装起来
            this.$router.replace('/profile')
            this.dl_xg() // 调用成功的方法使用 状态码进行更新
            // 并设置跳转成功的信息
          }, 1500);
        } else {
          this.count--
          if (this.count == 0) {
            this.text = null
            this.word = null
            this.count = 3
          } else {
            this.$message.error('账号或密码错误,请检查输入!' + '再错误' + this.count + '次后,清除账号密码!')
          }
        }
      }).catch(() => {
        // 请求失败
      })
    },
    qqlogin() {
      this.$toast.show('QQ登录正在设计....', 1000)
    },
    wxlogin() {
      this.$toast.show('微信登录正在设计....', 1000)
    }
  }
}

</script>

<style scoped>
@import url('@/components/common/login/css/style.css');
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
</style>